<template>
  <div id="productMainList">
    <div class="warp">
      <div class="grid-1122 clearfix">
        <div class="plist-table">
          <div class="plist-head clearfix">
            <div class="fl">
              <span class="title">理财超市</span>
            </div>
            <div class="fr">
              <a>
                <Icon type="android-chat"></Icon>
                <span>理财咨询</span>
              </a>
            </div>
          </div>
          <div class="plist-search">
            <ul>
              <li>
                <span>理财期限</span>
                <RadioGroup v-model="searchRequest.period" type="button" size="large">
                  <Radio label="all">全部</Radio>
                  <Radio label="1">0~3个月</Radio>
                  <Radio label="2">3~6个月</Radio>
                  <Radio label="3">6~12个月</Radio>
                  <Radio label="4">12个月以上</Radio>
                </RadioGroup>
              </li>
              <li>
                <span>产品类型</span>
                <RadioGroup v-model="searchRequest.type" type="button" size="large">
                  <Radio label="all">全部</Radio>
                  <Radio label="1">保险</Radio>
                  <Radio label="2">固收</Radio>
                  <Radio label="3">票税</Radio>
                  <Radio label="4">券商</Radio>
                  <Radio label="5">养老保障</Radio>
                </RadioGroup>
              </li>
              <li>
                <span>起购金额</span>
                <RadioGroup v-model="searchRequest.startAmount" type="button" size="large">
                  <Radio label="all">全部</Radio>
                  <Radio label="1">0~1000元</Radio>
                  <Radio label="2">1000~1万</Radio>
                  <Radio label="3">1万~5万</Radio>
                  <Radio label="4">5万以上</Radio>
                </RadioGroup>
              </li>
            </ul>
          </div>
          <div class="plist-content">
            <Table center :columns="productCoulum" :data="data5"></Table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'product-main-list',
    data () {
      return {
        searchRequest: {
          period: '',
          type: '',
          startAmount: ''
        },
        productCoulum: [
          {
            title: '收益率',
            key: 'rate',
            sortable: true
          },
          {
            title: '期限/锁定期',
            key: '',
            sortable: true
          },
          {
            title: '产品名称',
            key: 'name'
          },
          {
            title: '起投金额',
            key: ''
          },
          {
            title: '剩余可投金额',
            key: ''
          },
          {
            title: '操作'
          }

        ]
      }
    }
  }
</script>
<style>
 #productMainList {
   background: fff none repeat scroll 0 0;
 }
 #productMainList .plist-table .plist-head{
   padding: 10px;
 }
 #productMainList .plist-table .plist-head .title{
   font-size: 25px;
   font-weight: 700;
 }

 #productMainList .plist-table .plist-head a {
   border: 1px solid #F82B3A;
   border-radius: 3px;
   padding: 5px 17px;
   color: #F82B3A;
   line-height: 40px;
   transition: all 0.2s ease-in-out 0s;
   margin: 0 10px 0;
 }

 #productMainList .plist-table .plist-head a:hover {
   background:#F82B3A none repeat scroll 0 0;
   color: #fff;
   font-size: 13px;
   font-weight: 700;
 }
 #productMainList .plist-table .plist-search {
   background: #F7F6FC none repeat scroll 0 0;
   padding: 20px 0 10px 25px;
   margin: 0 0 20px 0;
 }
 #productMainList .plist-table .plist-search ul li span:first-child {
   font-size: 14px;
   font-weight: 700;
   color: #A5A5A5;
 }
 #productMainList .plist-table .plist-search .ivu-radio-group-button .ivu-radio-wrapper {
   background: #F7F6FC none repeat scroll 0 0;
   border: 0;
 }
 #productMainList .plist-table .plist-search .ivu-radio-group-button .ivu-radio-wrapper-checked {
   color: #F82B3A;
   box-shadow: 0px 0 0 0 #2d8cf0;
   font-weight: 700;
 }
 #productMainList .plist-table .plist-search .ivu-radio-wrapper:hover {
   color: #F82B3A;
 }
</style>
